<template>
  <view class="p-page">
    <view
      v-if="!auth.id || (!loading && tickets.length === 0)"
      class="u-flex-xy-center"
      :style="{ height: '70vh' }"
    >
      <view v-if="!auth.id">
        <view>
          <text>请先登录</text>
        </view>
        <view class="mt-base">
          <u-button type="primary" size="small" @tap="handleToLogin"
            >去登录</u-button
          >
        </view>
      </view>

      <u-empty
        v-else-if="!loading && tickets.length === 0"
        mode="order"
        icon-color="#9acafc"
        text="无购票记录"
        text-size="16px"
      ></u-empty>
    </view>

    <view
      v-for="ticket in tickets"
      :key="ticket.orderNO"
      class="page-box TrainItem lg"
    >
      <view class="p-base u-flex u-flex-between OrderInfo">
        <text>订单号：{{ ticket.orderNO }}</text>
        <text>车票仅当日档次有效</text>
      </view>

      <u-line></u-line>

      <view class="px-base py-llg">
        <view>
          <u-row :gutter="12">
            <u-col :span="4">
              <view class="Time">{{
                ticket.fromTime | timeFormat("HH:mm")
              }}</view>
              <view class="Station">{{ ticket.from }}</view>
            </u-col>
            <u-col :span="4">
              <view class="text-center">
                <view class="my-ssm">{{ ticket.trainNo }}</view>
                <u-line></u-line>
                <view
                  class="my-ssm text-center text-info"
                  :style="{ fontSize: '15px' }"
                  >{{ $u.dayjs(ticket.date).format("MM月DD日") }}&ensp;{{
                    $u.dayjs(ticket.date).isToday()
                      ? "今天"
                      : $u.timeFormat(ticket.date, "[周]dd")
                  }}</view
                >
              </view>
            </u-col>
            <u-col :span="4">
              <view class="Time text-end">{{
                ticket.toTime | timeFormat("HH:mm")
              }}</view>
              <view class="Station text-end">{{ ticket.to }}</view>
            </u-col>
          </u-row>
        </view>

        <view class="mt-base u-flex-y-center u-flex-between OrderInfo">
          <text>已支付</text>
          <text class="text-warning" :style="{ fontSize: '15px' }"
            >￥{{ ticket.price }}</text
          >
        </view>
      </view>

      <!--
      <u-line></u-line>

      <view class="u-flex-y-center">
        <view class="u-flex-grow OptionItem">改签</view>
        <u-line direction="col" length="26px"></u-line>
        <view class="u-flex-grow OptionItem">退票</view>
        <u-line direction="col" length="26px"></u-line>
        <view class="u-flex-grow OptionItem">变更到站</view>
      </view>
      -->
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import apiTickets from "@/api/tickets";
import { timeAscCompareFn } from "@/utils/functions.js";

export default {
  data() {
    return {
      tickets: [],
      loading: false,
    };
  },
  computed: {
    ...mapState({ auth: "auth" }),
  },
  /* 注意这里是 onShow 而不是 onLoad，详情查看 uniapp 生命周期 */
  onShow() {
    if (this.auth.id) {
      this.loadMyTickets();
    }
  },
  methods: {
    handleToLogin() {
      uni.navigateTo({ url: "/pages/LoginView/LoginView" });
    },
    loadMyTickets() {
      this.loading = true;
      uni.showLoading({ title: "正在加载" });

      apiTickets
        .get()
        .then((res) => {
          // 按上车时间顺序，并去掉今天之前的车票
          this.tickets = res.data
            .sort(
              (a, b) =>
                timeAscCompareFn(a.fromTime, b.fromTime) ||
                timeAscCompareFn(a.toTime, b.toTime) ||
                a.id - b.id
            )
            .filter(
              (tkt) =>
                !uni.$u
                  .dayjs(tkt.fromTime)
                  .isBefore(uni.$u.dayjs().startOf("date"))
            );
        })
        .catch(() => {
          this.tickets = [];
        })
        .then(() => {
          this.loading = false;
          uni.hideLoading();
        });
    },
  },
};
</script>

<style></style>
